<template>
    <div class="CalendarView" v-if="calendarView">
        <div class="CalendarView-flex">
            <div class="CalendarView-head">
                <div class="CalendarView-head-le">{{i18n('form.mySchedule','我的日程')}}</div>
                <div class="CalendarView-head-ri">
                    <span class="CalendarView-head-ri-add" v-if="buttonsHead.length>0" @click="handButtonClick(null,buttonsHead[0])">{{buttonsHead[0].btnLabel}}</span>
                    <div class="CalendarView-head-ri-more">
                        <div class="CalendarView-head-ri-more-icon">
                            <my-icon type="iconmore1"></my-icon>
                        </div>
                        <ul class="CalendarView-head-ri-more-hover">
                            <li v-for="(obj,index) in buttonsHead" @click="handButtonClick(null,obj)" v-if="index>0">{{obj.btnLabel}}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div>
                <div class="CalendarView-schedule-head">
                    <div @click="goPrev" class="CalendarView-schedule-head-left"><i class="iconfont iconjiantou_liebiaoxiangzuo"></i></div>
                    <div @click="goNext" class="CalendarView-schedule-head-left"><i class="iconfont iconjiantou_liebiaoxiangyou"></i></div>
                    <div class="CalendarView-schedule-head-data">{{curDate}}</div>
                    <div @click="todayCalen" class="CalendarView-schedule-head-today" >{{$ti18('rxDate.today','今天')}}</div>
                </div>
                <img class="CalendarView-img" src="@/image/rili-bg.png"></img>
                <a-calendar class="CalendarView-schedule" :fullscreen="false" mode="month" @select="onCalendarSelect"  @panelChange="onCalendarSelect" v-model="curDate">
                    <ul slot="dateCellRender" slot-scope="value" class="events">
                        <span :class="[value.format('YYYY-MM-DD') ==curDate?'calend-span-red':'calend-span']" v-if="getCalendarDayListData(value)"></span>
                    </ul>
                </a-calendar>
               <div class="CalendarView-relist-common">
                   <div class="CalendarView-relist">{{curDate}}{{ calendarView.name }}{{i18n('form.schedule','日程')}}</div>
                   <div class="CalendarView-relist-common-ri" @click="more">{{$ti18('rxList.all','全部')}}<my-icon type="iconplayer-pause"></my-icon></div>
               </div>
            </div>
            <div class="alendarView-list-flex" v-if="monthData.length !=0 && dayData.length !=0">
                <div class="CalendarView-list" v-for="data in dayData">
                    <div class="CalendarView-list-left">
                        <div class="CalendarView-list-head" v-for="name in dayColumns">{{data[name.key]}}</div>
                    </div>
                    <div class="CalendarView-list-right">
                        <span v-if="filtersDate(data.start)">{{filtersDate(data.start)}}</span>
                        <div class="CalendarView-list-right-more">
                            <my-icon type="iconmore1"></my-icon>
                            <ul class="CalendarView-list-right-more-hover">
                                <li v-for="(obj,index) in buttonsRow" @click="handButtonClick(data,obj)">{{obj.btnLabel}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <a-empty v-if="monthData.length ==0 || dayData.length ==0"/>
        </div>
    </div>
</template>

<script>
import FormCalendarViewApi from "@/api/form/core/formCalendarView";
import moment from 'moment'
import BusEvent from "@/views/modules/form/core/formComponent/BusEvent";
import {debounce} from "lodash-es";
import PublicApi from "@/api/form/core/public";
import DialogBox from "@/assets/js/DialogBox";
import FormCalendarViewShow from '@/views/modules/form/core/FormCalendarViewShow'
import CalendarViewFunc from '@/views/modules/form/core/js/CalendarViewFunc'
import {Util} from "@lowcode/jpaas-common-lib";

export default {
    name: "CalendarView",
    mixins:[BusEvent,CalendarViewFunc],
    props: {
        config:{
            type:Object,
            default:{}
        },
        layoutItem:{
            type:Object,
            default:{}
        }
    },
    data() {
        return {
            //当前月数据
            monthData:[],
            //当月全量数据(未重构)
            allMonthData:[],
            //当前日详细数据
            dayData:[],
            calendarView:"",
            //当前年月
            curYearAndMonth:"",
            //当前日期 年月日
            curDate:"",
            format:"YYYY-MM-DD HH:mm:ss",
            //按钮
            buttonsRow:[],
            buttonsHead:[],
            idField:"",
            dayColumns:[],
        }
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formChartDef", key);
        },
        //确定当天
        todayCalen(){
            var date = moment().format("YYYY-MM-DD");
            this.onCalendarSelect(date,false);
        },
        goPrev () {
            this.curDate = moment(this.curDate).subtract(1, 'months').startOf('month').format("YYYY-MM-DD");
            this.onCalendarSelect(this.curDate,false);
        },
        goNext () {
            this.curDate = moment(this.curDate).add(1, 'months').startOf('month').format("YYYY-MM-DD");
            this.onCalendarSelect(this.curDate,false);
        },
        filtersDate(value){
            if(value){
                var obj = value.split(' ')
                if(obj[1] && obj[1]!='00:00'){
                    return obj[1]
                }else {
                    return
                }
            }else {
                return ''
            }
        },
        init() {
            if (this.config) {
                //取路由参数
                var params=this.getRouterParams();
                var date="";
                //读取配置的参数
                if(this.config.receive.mapping.length>0){
                    var mapping=this.config.receive.mapping[0];
                    if(mapping.valueSource == 'param'){
                        if(this.config.receive.type== "url"){
                            if (params[mapping.valueDef]) {
                                date=params[mapping.valueDef];
                            }
                        }else {
                            if (params[mapping.name]) {
                                date=params[mapping.name];
                            }
                        }
                    }
                }
                var start="";
                var end="";
                if(date){
                    this.curYearAndMonth=moment(date).format("YYYY-MM");
                    this.curDate=moment(date).format("YYYY-MM-DD");
                    start=moment(this.curDate).startOf('month').format(this.format);
                    end=moment(this.curDate).endOf('month').format(this.format);
                }else {
                    //获取当前月第一天0时0分0秒
                    start=moment().startOf('month').format(this.format);
                    //获取当前月最后一天0时0分0秒
                    end=moment().endOf('month').format(this.format);
                    this.curYearAndMonth=moment().format("YYYY-MM");
                    this.curDate=moment().format("YYYY-MM-DD");
                }
                var self=this;
                this.getParams(function (res) {
                    var params={months:[start,end]};
                    if(res && res.curDate){
                        //获取当前月第一天0时0分0秒
                        var curStart=moment(res.curDate).startOf('month').format(this.format);
                        //获取当前月最后一天0时0分0秒
                        var curEnd=moment(res.curDate).endOf('month').format(this.format);
                        params.months=[curStart,curEnd];
                    }
                    self.loadData(self.config.calendarKey,params,self.curDate,true);
                })

            }
        },
        loadData(calendarKey,parameter,curDate,isInst){
            if(!calendarKey){
                return;
            }
            if(parameter){
                var params={params:JSON.stringify(parameter)};
            }else {
                var start=moment(this.curDate).startOf('month').format(this.format);
                var end=moment(this.curDate).endOf('month').format(this.format);
                var params={months:[start,end]};
            }
            FormCalendarViewApi.getDataByKey(calendarKey,"",params).then(res=>{
                if(res.success && res.data && res.data.calendarView){
                    this.calendarView=res.data.calendarView;
                    this.idField=this.calendarView.columnConf.idField;
                    var optionsButtons = res.data.calendarView.buttonConf;
                    this.buttonsRow = optionsButtons.filter(ther=>{
                        if(ther.btnType =='row'){
                            return ther
                        }
                    })
                    this.buttonsHead = optionsButtons.filter(ther=>{
                        if(ther.btnType =='head'){
                            return ther
                        }
                    })
                    this.allMonthData=res.data.calendarData.monthData;
                    this.initCalendarData(res.data.calendarData.monthData);
                    this.onCalendarSelect(curDate,isInst);
                }else {
                    this.$message.error(this.i18n('msg.loadDataTips1','未查询到key为')+calendarKey+this.i18n('msg.calView','的日历视图!'));
                }
            })
        },
        onCalendarSelect(value,isInst) {
            var curYearAndMonth=moment(value).format("YYYY-MM");
            var curDate=moment(value).format("YYYY-MM-DD");
            if(this.curYearAndMonth!=curYearAndMonth){
                this.curYearAndMonth=curYearAndMonth;
                //获取月第一天0时0分0秒
                var start=moment(curYearAndMonth).startOf('month').format(this.format);
                //获取月最后一天0时0分0秒
                var end=moment(curYearAndMonth).endOf('month').format(this.format);
                this.loadData(this.config.calendarKey,{months:[start,end]},curDate,false,);
            }else {
                this.curDate=curDate;
                this.dayData=[];
                if(this.calendarView.columnConf.timeQuantum){
                    //跨天
                    this.monthData.forEach(item => {
                        if(moment(item.start.split(' ')[0]).valueOf() <=moment(curDate).valueOf() && moment(curDate).valueOf()<= moment(item.end.split(' ')[0]).valueOf()){
                            var data=this.getDayData(item);
                            this.dayData.push(data);
                        }
                    });
                }else {
                    //不跨天
                    this.monthData.forEach(item => {
                        if(item.start.includes(curDate)){
                            var data=this.getDayData(item);
                            this.dayData.push(data);
                        }
                    });
                }
                this.publishEvent({component:this.config.alias,params:{"curDate":curDate}});
            }
        },
        initCalendarData(data) {
            if(data){
                this.monthData=[];
                var timeFields=[];
                if(this.calendarView.columnConf.timeFields){
                    timeFields=this.calendarView.columnConf.timeFields
                }else {
                    timeFields=[{
                        startField:this.calendarView.columnConf.startField,
                        endField:this.calendarView.columnConf.endField,
                        background:"",
                    }];
                }
                for (let i = 0; i < timeFields.length; i++) {
                    var timeField=timeFields[i];
                    for (let j = 0; j < data.length; j++) {
                        var item = data[j];
                        var obj={
                            pkId:item[this.idField],
                            title: item.monthTitle,
                            start: item[timeField.startField],
                            cssClass: ["family", "career"],
                            YOUR_DATA: {},
                            background:timeField.background
                        }
                        if(this.calendarView.columnConf.timeQuantum){
                            obj.end=item[timeField.endField]
                        }
                        if(obj.start){
                            this.monthData.push(obj);
                        }
                    }
                }
            }
        },
        //判断当天是否有数据
        getCalendarDayListData(value) {
            var show = false
            if (this.calendarView.columnConf.timeQuantum){
                //跨天
                var time = value.format('YYYY-MM-DD');
                this.monthData.forEach(item => {
                    if(moment(item.start.split(' ')[0]).valueOf() <=moment(time).valueOf() && moment(time).valueOf()<= moment(item.end.split(' ')[0]).valueOf()){
                        show = true
                    }
                });

            }else {
                //不跨天
                var time = value.format('YYYY-MM-DD');
                this.monthData.forEach(item => {
                    if(item.start.includes(time)){
                        show = true
                    }
                });
            }
            return show
        },
        getParams(callback){
            PublicApi.getParams(JSON.stringify(this.config.receive.mapping)).then(res=>{
                callback(res);
            }).catch(err=>{
                callback({});
            })
        },
        //发布事件
        publishEvent(data){
            this.$bus.$emit('calendarViewEvent',data);
        },
        handReceive :debounce(function (args, self_){
            var receive=self_.config.receive;
            var params=args.params;
            if(receive.type=='event' && receive.publishComponent==args.component){
                //读取配置的参数
                for(var i=0;i<receive.mapping.length;i++){
                    var o=receive.mapping[i];
                    //处理没有配置值来源的情况。
                    if(!o.valueDef && inputParams[o.name]){
                        params[o.name]=inputParams[o.name]
                    }
                    else if(o.valueSource=='param' && params[o.valueDef]){
                        params[o.name]=moment(params[o.valueDef]).format('YYYY-MM-DD');
                    }
                }
                if(params.curDate){
                   self_.onCalendarSelect(params.curDate,false);
                }
            }
        },300),
        //点击日视图触发事件
        dayClick(data){
            this.publishEvent({component:this.config.alias,params:{"curDate":data.value,"pkId":data.pkId}});
            var self=this;
            if(this.config.daySetting.mode=="form" && this.config.daySetting.form){
                var form=JSON.parse(this.config.daySetting.form);
                var config={
                    title: form.text,
                    curVm: self,
                    data: {
                        alias: form.value,
                        pkId: data.pkId,
                        readOnly: this.config.daySetting.readonly,
                    },
                }
                if(this.config.daySetting.isMax=="NO"){
                    config.widthHeight=[this.config.daySetting.width + 'px', this.config.daySetting.height + 'px']
                }else {
                    config.max=true;
                }
                DialogBox.showForm(config, function (action,data) {

                });
            }else if(this.config.daySetting.mode=="link" && this.config.daySetting.link){
                window.open(this.config.daySetting.link);
            }
        },
        getDayData(record){
            this.dayColumns=this.config.daySetting.dayColumns;
            if(!this.dayColumns || this.dayColumns.length==0){
                return record;
            }
            for (let i = 0; i < this.allMonthData.length; i++) {
                var data=this.allMonthData[i];
                if(data[this.calendarView.columnConf.idField]==record.pkId){
                    for (let j = 0; j < this.dayColumns.length; j++) {
                        record[this.dayColumns[j].key]=data[this.dayColumns[j].key];
                    }
                    break;
                }
            }
            return record;
        },
       //更多
        more(){
            Util.open({
                component:FormCalendarViewShow,
                curVm:this,
                max:true,
                title: this.config.calendarName+ this.i18n('form.calendar','日历视图'),
                data:{
                    calendarKey:this.config.calendarKey,
                }
            },function (action,data){});
        },
        //处理按钮
        handButtonClick(data,button){
            data=data?data:{};
            if(!button) return;
            var method="this."+button.btnClick+"(data)";
            eval(method);
        },
    },
    watch: {
    }
}
</script>

<style lang="less">
.CalendarView-list-right-more:hover .CalendarView-list-right-more-hover{
    display: block;
}
.CalendarView-list-right-more-hover li:hover{
    color: #458bff;
}
.CalendarView-list-right-more-hover{
    position: absolute;
    display: none;
    right: -21px;
    z-index: 99;
    background-color: #ffffff;
    box-shadow: 0px 0px 8px 0px
    rgba(6, 0, 1, 0.1);
    min-width: 70px;
    border-radius: 0px 4px 4px 0px;
    top: 24px;
    padding: 4PX 13PX;
    li{
        height: 20px;
        line-height: 20px;
        border-bottom: 1px solid #e8e8e8;
    }
}
.CalendarView-list-right-more{
    width: 25px;
    height: 25px;
    background-color: #ecf3ff;
    border-radius: 25px;
    text-align: center;
    line-height: 25px;
    margin: 10px;
    cursor: pointer;
    position: relative;
    i{
        color: #458bff;
    }
}
.CalendarView-relist-common{
    align-items: center;
    display: flex;
}
.CalendarView-relist-common-ri{
    width: 52px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    background:rgba(69,139,255,0.1);
    border-radius: 2px;
    color: #458bff;
    font-size: 12px;
    cursor: pointer;
    margin-top: 10px;
}
.CalendarView-head-ri-more-icon{
    width: 30px;
    height: 30px;
    border-radius: 4px;
    text-align: center;
    line-height: 30px;
    border: solid 1px #dfdfdf;
    font-size: 20px;
    margin-top: 12px;
    color: #555555;
}
.CalendarView-head-ri-more:hover .CalendarView-head-ri-more-hover{
    display: block!important;
}
.CalendarView-head-ri-more-hover{
    position: absolute;
    display: none;
    right: -22px;
    background-color: #ffffff;
    box-shadow: 0px 0px 8px 0px
    rgba(6, 0, 1, 0.1);
    border-radius: 0px 4px 4px 0px;
    top: 45px;
    padding: 0PX 13PX;
    width: 82px;
    li{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        height: 20px;
        margin: 2px 0px;
        text-align: center;
        line-height: 20px;
        border-bottom: 1px solid #e8e8e8;
    }
}
.CalendarView-head-ri{
    display: flex;
    position: relative;
    .CalendarView-head-ri-add{
        font-size: 14px;
        color: #458bff;
        cursor: pointer;
    }
    .CalendarView-head-ri-more{
        cursor: pointer;
        margin-left: 20px;
        color: #303030;
        display: flex;
        line-height: 54px;
        font-size: 14px;
    }
}
.CalendarView-head{
    display: flex;
    height: 54px;
    border-bottom: 1px solid #e8e8e8;
    padding: 0px 23px;
    .CalendarView-head-le{
        flex: 1;
        line-height: 54px;
        font-size: 16px;
        color: #333333;
    }
}
.events{
    margin-bottom: 15px!important;
}
.calend-span{
    display: block;
    margin: auto;
    width: 4px;
    border-radius: 4px;
    height:4px;
    background: white;
}
.calend-span-red{
    display: block;
    margin: auto;
    width: 4px;
    border-radius: 4px;
    height:4px;
    background: #1890ff;
}
.CalendarView-head{
    display: flex;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e8e8e8;
}
.CalendarView-schedule-head{
    display: flex;
    line-height: 30px;
    margin-top: 10px;
    .CalendarView-schedule-head-today{
        border-radius: 7px;
        border: solid 1px #dfdfdf;
        padding: 0px;
        font-size: 13px;
        height: 25px;
        line-height: 25px;
        width: 41px;
        margin-top: 5px;
        text-align: center;
        cursor: pointer;
    }
    .CalendarView-schedule-head-data{
        flex: 1;
        text-align: left;
        font-size: 15px;
        color: #333333;
        font-weight: 700;
    }
    .CalendarView-schedule-head-left:hover{
        background-color: #ebeef0;
        cursor: pointer;
    }
    .CalendarView-schedule-head-left{
        color: #697377;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;
        i{
            font-size: 27px;
        }

    }
}
.CalendarView-flex{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.CalendarView-flex >div:nth-child(2),.CalendarView-flex >div:nth-child(3){
    padding: 0px 13px;
}
.alendarView-list-flex{
    overflow: auto;
    flex: 1;
}
.CalendarView-list{
    display: flex;
    border-left: 2px solid #4f65ff;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #ffffff;
    box-shadow: 0px 0px 4px 0px
    rgba(6, 0, 1, 0.1);
    border-radius: 0px 2px 2px 0px;
    .CalendarView-list-left{
        margin-left: 7px;
        flex: 1;
        width: calc(100% - 100px);
        padding: 7px 0px;
        div{
            display: block;
            color: #a8b2bd;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .CalendarView-list-head{
            color: #333333;
            margin-bottom: 7px;
        }
    }
    .CalendarView-list-right{
        display: flex;
        span{
            width: 43px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            background-color: #f2f2f2;
            color: #777777;
            border-radius: 4px;
            margin-top: 10px;
            display: block;
        }
    }
}
.CalendarView-relist{
    color: #333333;
    line-height: 30px;
    margin-top: 10px;
    padding-left: 7px;
    font-weight: 700;
    flex: 1;
}
.CalendarView-img{
    position: absolute;
    top: 106px;
    left: 0px;
    height: 272px;
    width: 100%;
}
.CalendarView{
    position: relative;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 0px 1px 2px 0px
    rgba(6, 0, 1, 0.1);
    border-radius: 3px;
    .ant-fullcalendar-header{
        height: 0px!important;
        padding: 0px;
        overflow: hidden;
        margin-bottom: 10px;
    }
    .ant-fullcalendar-calendar-body{
        padding-top: 0px!important;
    }
    .ant-fullcalendar-column-header{
        line-height: 40px!important;
    }
    .ant-fullcalendar-last-month-cell .ant-fullcalendar-value, .ant-fullcalendar-next-month-btn-day .ant-fullcalendar-value{
        color: rgba(250,250,250,0.3);
    }
    .ant-fullcalendar-value{
        color: white;
    }
    .ant-badge-status-dot{
        position: relative;
        top: 8px!important;
        display: inline-block;
        width: 4px!important;
        height: 4px!important;
        vertical-align: middle;
        border-radius: 50%;
        background: red;
    }
    .ant-fullcalendar-value:hover{
        background: none;
        -webkit-box-shadow: 0 0 0 2px #fdfeff inset!important;
        border-radius: 50%;
    }
    .relisdian{
        cursor: pointer;
    }
    .ant-fullcalendar-value{
        width: 35px;
        height: 35px;
        line-height: 34px;
    }
    .ant-fullcalendar-today .ant-fullcalendar-value, .ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-value{
        -webkit-box-shadow: 0 0 0 2px #fdfeff inset!important;
    }
    .ant-fullcalendar-selected-day .ant-fullcalendar-value{
        background-color: white;
        color: #485fff;
    }
}
.CalendarView-schedule{
    .ant-fullcalendar-column-header{
        color: #ffffff!important;
    }
    .ant-fullcalendar-tbody{
        border-top: 1px solid rgba(255,255,255,0.3);
    }
    .ant-fullcalendar{
        background-image: linear-gradient(-33deg,
        #6e52ff 0%,
        #4e66ff 100%),
        linear-gradient(
            #f0f2f5,
            #f0f2f5);
        border-radius: 5px;
        border: none!important;
        overflow: hidden;
    }
    tr:nth-child(odd){
        background: none!important;
    }
}

</style>